<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                虚拟滚动列表（JDynamicVirtualList）
                <div class="j-detail">
                    虚拟滚动列表，可以展示数量较多的数据，支持版本 ^0.9.6
                </div>
            </div>
        </template>
        <template v-slot:left-p>
            <div class="content" style="width: 100%; padding: 1rem">
                <JDynamicVirtualList
                    :data="bigData"
                    :estimated-height="80"
                    class="list-container"
                >
                    <template v-slot:default="{ item }">
                        <div
                            class="custom-item"
                            :style="{ height: item.height + 'px' }"
                            @click="itemClick(item)"
                        >
                            {{ item.content }}
                        </div>
                    </template>
                </JDynamicVirtualList>
            </div>
        </template>
        <template v-slot:right-p>
            <div>
                <j-table :title="tableTitle" :tableData="tableData"> </j-table>
            </div>
        </template>
        <template v-slot:footer-p>
            <pre v-highlight>
                <code class="vue">
                    <div v-text="code"></div>
                </code>
            </pre>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JDynamicVirtualListView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            tableData: [],
            bigData: Array.from({ length: 5000 }, (_, i) => ({
                content: `Item - ${i}`,
                height: 100 + Math.random() * 100,
            })),
        };
    },
    created() {
        this.initTableData();
        this.initCodeContent();
    },
    mounted() {},
    methods: {
        itemClick(item) {
            console.log("点击了：", item);
        },
        initCodeContent() {
            this.code = `
<template>
    <div class="content" style="width: 100%; padding: 1rem">
        <JDynamicVirtualList
            :data="bigData"
            :estimated-height="80"
            class="list-container"
        >
            <template v-slot:default="{ item }">
                <div
                    class="custom-item"
                    :style="{ height: item.height + 'px' }"
                >
                    {{ item.content }}
                </div>
            </template>
        </JDynamicVirtualList>
    </div>
</template>

export default {
    data() {
        return {
            bigData: Array.from({ length: 5000 }, (_, i) => ({
                content: \`Item - \${i}\`,
                height: 100 + Math.random() * 100,
            })),
        };
    },
}
            `;
        },
        initTableData() {
            this.tableData = [
                {
                    parameter: "data",
                    field: "原始数组数据",
                    type: "Array",
                    describe: "需要展示的数组数据",
                },
                {
                    parameter: "estimatedHeight",
                    field: "每一个元素的预估高度",
                    type: "Number",
                    describe: "默认为50，后续会重新计算实际高度",
                },
                {
                    parameter: "buffer",
                    field: "缓冲项数",
                    type: "Number",
                    describe: "除去可视区域外，额外渲染的元素个数，默认为3",
                },
                {
                    parameter: "visibleCount",
                    field: "可视区域的元素个数",
                    type: "Number",
                    describe: "默认为5，即可视区域最多显示5 + buffer*2个元素",
                },
            ];
        },
    },
};
</script>
<style lang="less" scoped>
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
    height: 40vh;
    overflow-y: scroll;
    // width: 50%;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #fafafa;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgb(191, 191, 191);
    }

    // 较新的 API
    body {
        scrollbar-width: thin;
        scrollbar-color: #718096 #edf2f7;
    }
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
.list-container {
    height: 95%;
    border: 1px solid #eee;
}

.custom-item {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}
</style>
